<template>
	<view class="b_width hui">
		<view class="form_box" v-if="!info.id">

			<view class="xx_box">
				<view class="xx_title">请填写您的房屋信息</view>
				<view class="b_flex_c input_box i_b_b" @click="$project.toPath('/pages/new/plot')">
					<view class="b_flex_c left">
						<view class="">小区</view>
					</view>
					<input disabled v-model="plot" placeholder="选择小区信息" placeholder-style="color:#CECECE"></u--input>
					<u-icon class="right_icon" name="arrow-right" color="#DDDDDD"></u-icon>
				</view>

				<view class="b_flex_c input_box i_b_b" @click="setFloor">
					<view class="b_flex_c left">
						<!-- 	<view class="b_red xing">*</view> -->
						<view class="">楼栋单元</view>
					</view>
					<input disabled v-model="floor" placeholder="选择楼栋单元" placeholder-style="color:#CECECE"></u--input>
					<u-icon class="right_icon" name="arrow-right" color="#DDDDDD"></u-icon>
				</view>

				<!-- <view class="b_flex_c input_box">
					<view class="b_flex_c left">
							<view class="b_red xing">*</view> 
						<view class="">门牌号</view>
					</view>
					<input v-model="form.code" placeholder="请输入门牌号" placeholder-style="color:#CECECE"></u--input>

				</view> -->

			</view>

			<view class="xx_box" >

				<view class="xx_title">请完善您的身份信息</view>

				<view class="b_flex_c input_box" @click="groupShow=true">
					<view class="b_flex_c left">
						<view class="">身份</view>
					</view>
					<input v-model="groups" class="i_right" disabled placeholder="请选择您的身份"
						placeholder-style="color:#CECECE"></u--input>
					<u-icon class="l_icon" name="arrow-right" color="#DDDDDD"></u-icon>
				</view>

				<view class="b_flex_c input_box" v-if="!user.name">
					<view class="b_flex_c left">
						<view class="">姓名</view>
					</view>
					<input v-model="form.nickname" class="i_right" placeholder="请输入您的姓名"
						placeholder-style="color:#CECECE"></u--input>
					<view class="l_icon"></view>
				</view>

				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">手机号</view>
					</view>
					<input v-model="form.mobile" class="i_right" placeholder="请输入手机号"
						placeholder-style="color:#C2C7CE"></u--input>
					<view class="l_icon"></view>
				</view>

				<!-- <view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">证件类型</view>
					</view>


					<u-radio-group active-color="#E8A206" class="sex_box" v-model="form.card_type">
						<u-radio class="radio" v-for="(item, index) in cardList" :key="index" :name="item.id">
							{{item.name}}
						</u-radio>
					</u-radio-group>

					<view class="l_icon"></view>
				</view>

				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">证件号码</view>
					</view>
					<input v-model="form.card" class="i_right" placeholder="请输入证件号码"
						placeholder-style="color:#C2C7CE"></u--input>
					<view class="l_icon"></view>
				</view> -->

				<view class="b_flex_c input_box" v-if="!user.name">
					<view class="b_flex_c left">
						<view class="">性别</view>
					</view>

					<u-radio-group active-color="#E8A206" class="sex_box" v-model="form.sex">
						<u-radio class="radio" v-for="(item, index) in sexList" :key="index" :name="item.id">
							{{item.name}}
						</u-radio>
					</u-radio-group>

					<view class="l_icon"></view>
				</view>

				<view class="input_box" v-if="!user.name">
					<view class="bz_box b_flex_c">
						<view>人脸图片 <text class="msg">(200kb以内格式jpg,非必填)</text></view>
					</view>
					<view class="upload_box">
						<imgUpload :maxSize="204800" :limitType="['jpg']" :maxCount="1" v-model="form.url"></imgUpload>
					</view>
				</view> 
			</view>
			<view class="sumbit" @click="submit">提交认证</view>
		</view>
		<view class="shen_box" v-else>
			<image :src="imgRemote+'/assets/img/company_pass.png'" mode="widthFix"></image>
			<view v-if="info.status==1">审核中~~</view>
			<view v-if="info.status==2">已通过</view>
			<view v-if="info.status==3" class="tc_box">
				<view>未通过
					<text v-if="info.remakes"> :{{info.remakes}}</text>
				</view>
				<view class="sumbit" @click="cx">重新提交</view>
			</view>
		</view>
		<u-select mode="single-column" v-model="groupShow" :list="groupsList" @confirm="confirm"></u-select>

		<u-select mode="single-column" v-model="plotShow" :list="plotList" @confirm="plotConfirm"></u-select>

		<u-select mode="single-column" v-model="floorShow" :list="floorList" @confirm="floorConfirm"></u-select>

		<w-picker :visible.sync="visible" mode="linkage" :value="defaultRegion1" :options="option" :level="3"
			default-type="id" :default-props="defaultProps1" @confirm="confirmAddrss($event,'linkage')" ref="linkage">
		</w-picker>

	</view>
</template>

<script>
	import imgUpload from "@/components/imgUpload.vue";
	const app = getApp().globalData;
	const {
		imgRemote,
	} = app;
	export default {
		components: {
			imgUpload
		},
		data() {
			return {
				imgRemote: imgRemote,
				form: {
					nickname: '',
					mobile: '',
					groups_id: '',
					sex: '',
					code: '',
					plot_id: '',
					floor_id: '',
					layer_id: '',
					room_id: '',
					url: ''
				},
				groupsList: [],
				plotList: [],
				floorList: [],
				groups: '',
				plot: '',
				floor: '',
				groupShow: false,
				plotShow: false,
				floorShow: false,
				info: {
					id: ''
				},
				stop: false,
				receiving: '',
				visible: false,
				defaultProps1: {
					label: "name",
					value: "id",
					children: "child"
				},
				defaultRegion1: [],
				option: [],
				sexList: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				cardList: [{
					id: 1,
					name: '身份证'
				}, {
					id: 2,
					name: '护照'
				}, {
					id: 3,
					name: '其他'
				}],
				type: '',
				user:{name:''}
			}
		},
		onLoad(data) {
			console.log(data);
			if (data.groups_id) {
				this.form.groups_id = data.groups_id;
			}
			if (data.groups) {
				this.groups = data.groups;
				this.stop = true;
			} else {
				this.stop = false;
			}
			if (data.type) {
				this.type = data.type;
			}
			this.getUserInfo();
			//this.getAddress();
			this.getType();
			this.getInfo();
			
			let _ = this;
			uni.$on('plot', function(e) {

				if (e.id != _.form.plot_id) {
					_.floor = '';
					_.form.floor_id = '';
					_.form.layer_id = '';
					_.form.room_id = '';
				}

				_.plot = e.name;
				_.form.plot_id = e.id;

				console.log(e);
			});

			uni.$on('floor', function(e) {

				_.floor = e.floor.name + e.layer.name + e.room.name;
				_.form.floor_id = e.floor.id;
				_.form.layer_id = e.layer.id;
				_.form.room_id = e.room.id;
				console.log(e);
			});

		},
		onShow() {

			//this.getPlot();

		},
		methods: {
			setFloor() {
				if (!this.form.plot_id) return this.$Toast('请先选择小区');
				this.$project.toPath('/pages/new/floor?id=' + this.form.plot_id + '&name=' + this.plot);
			},
			setFloorShow() {
				if (!this.form.plot_id) return this.$Toast('请先选择小区');

				this.floorShow = true;
			},
			floorConfirm(e) {
				this.floor = e[0].label;
				this.form.floor_id = e[0].value;
				this.floorShow = false;
			},
			plotConfirm(e) {
				this.plot = e[0].label;
				this.form.plot_id = e[0].value;
				this.plotShow = false;
				this.getFloor();
			},
			getFloor() {
				this.$get(this.$api.floorList, {
					plot_id: this.form.plot_id
				}, res => {
					this.floorList = res.data.data;
				});
			},
			getPlot() {
				this.$get(this.$api.plotList, {}, res => {
					this.plotList = res.data.data;
				});
			},
			mapPage() {
				this.visible = true;
			},
			cx() {
				let info = JSON.parse(JSON.stringify(this.info));
				console.log(info);
				let form = {
					nickname: info.nickname,
					mobile: info.mobile,
					groups_id: info.groups_id,
					sex: info.sex,
					code: info.code,
					id: info.id,
					plot_id: info.plot_id,
					floor_id: info.floor_id,
					layer_id: info.layer_id,
					room_id: info.room_id,
					url:info.url
				}
				this.groups = info.groups.name;
				this.plot = info.plot.name;
				this.floor = info.floor.name + info.layer.name + info.room.name;
				this.receiving = info.province + info.city + info.area;
				this.info.id = '';
				setTimeout(() => {
					this.form = form;
				}, 100)
			},
			getUserInfo() {
				let token = uni.getStorageSync('userToken');
				if (!token) return;

				this.$get(this.$api.userInfo, {
					token: token
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.user=data.data;
						this.form.mobile = data.data.mobile;
					}
				});
			},
			getInfo() {
				if (this.type == 3) return;
				this.$get(this.$api.aduitInfo, {
					token: uni.getStorageInfoSync('userToken')
				}, res => {
					this.info = res.data.data;
					if (!res.data.data.mobile) {
						this.form.mobile = res.data.data.users.mobile;
					}
				});
			},
			submit() {
				this.$post(this.$api.aduitAdd, this.form, res => {
					if (res.data.code == 1) {

						if (this.type == 3) {
							uni.navigateBack({});
						} else {
							uni.switchTab({
								url: '/pages/tabar/user'
							});
						}

					} else {
						this.$Toast(res.data.msg);
					}

				});
			},
			confirm(e) {
				this.groups = e[0].label;
				this.form.groups_id = e[0].value;
				this.groupShow = false;
			},
			getType() {
				this.$get(this.$api.aduitType, {}, res => {
					this.groupsList = res.data.data;
				});
			},
			toArea() {
				let _ = this;
				// 获取当前位置信息
				uni.getLocation({
					success(res) {
						// 调起地图并显示指定的经纬度
						uni.chooseLocation({
							success(e) {
								_.form.site = e.address + e.name;
							}
						});
					}
				});
			},
			getAddress() {
				this.$get(this.$api.mainRegion, {}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						data.data.map((item) => {
							if (item.child.length == 0) {
								item.child = [{
									id: '',
									name: '',
									child: [{
										id: '',
										name: ''
									}]
								}]
							}
							item.child.map((second) => {
								if (second.child.length == 0) {
									second.child = [{
										id: '',
										name: ''
									}]
								}
							})
							return item;
						})
						this.option = data.data;
					}
				})
			},
			confirmAddrss(e) {
				console.log(e);

				this.receiving = e.result;
				this.form.province = e.obj.col1.name;
				this.form.city = e.obj.col2.name;
				this.form.area = e.obj.col3.name;
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	::v-deep {
		.u-radio__label {
			margin-right: 0 !important;
		}

		.u-radio__icon-wrap {
			margin-left: 20rpx;
		}
	}

	.b_width {
		width: 100%;
	}

	.hui {
		background: #F4F4F4;
		min-height: 100vh;
	}

	.form_box {
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		font-size: 28rpx;
	}

	.xx_box {
		box-sizing: border-box;
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}

	.radio {
		display: inline-block;
	}

	.sex_box {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.xx_title {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.i_right {
		text-align: right;
		margin-left: auto;
	}

	.l_icon {
		margin-left: 10rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.bz_box {

		box-sizing: border-box;
		padding: 0 0 25rpx 0;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.input_box {
		box-sizing: border-box;
		padding: 30rpx 0;

	}

	.i_b_b {
		border-bottom: 1rpx solid #EFEFEF;
	}


	.upload_box {
		box-sizing: border-box;
		padding: 30rpx 0 0 0;
	}

	.b_flex_c {
		display: flex;
		align-items: center;
	}

	.b_red {
		color: red;
	}

	.b_f_w {
		font-weight: bold;
	}

	.xing {
		width: 18rpx;
		box-sizing: border-box;
		padding: 10rpx 0 0 0;
	}

	.left {
		width: 26%;
	}

	.tc_box {
		width: 50%;
		text-align: center;
	}

	.sumbit {
		//margin-top: 60rpx;
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #e34b0f;
		color: #fff;
		border-radius: 45rpx;
		margin: 80rpx auto 0 auto;
	}

	.map_box {
		font-size: 30rpx;
	}

	.shen_box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		height: 100vh;
	}

	.right_icon {
		margin-left: auto;
	}
	.msg{
		font-size: 24rpx;
	}
</style>